<template>
  <div class="buttonAddWrap">
    <el-dialog class="do-dialog" @opened="$store.commit('dialogTop')" title="案件处理" :visible.sync="visible" @close="dialogClose()" :close-on-click-modal="false">
      <el-form :model="model" :rules="rules" ref="iForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="案件编号：">{{model.punishNo}}</el-form-item>
        <el-form-item label="罚单部门：">{{model.agencyName?model.agencyName:"超级管理员"}}</el-form-item>
        <el-form-item label="用户名称：">{{model.userName}}</el-form-item>
        <el-form-item label="执法时间：">{{model.punishTime}}</el-form-item>
        <el-form-item label="案件地址：">{{model.punishAddress}}</el-form-item>
        <el-form-item label="处罚原因：">{{model.punishReason}}</el-form-item>
        <el-form-item label="上传图片：">
          <div class="image-list">
            <div class="item" v-for="(item, index) in model.images" :key="index" @click="handlePreview(item)">
              <img :src="item.url" alt="" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="处罚方式：">{{model.punishWay==0?"警告":model.punishWay==1?"罚款":""}}</el-form-item>
        <el-form-item label="处罚金额：">{{model.punishMoney/100}}</el-form-item>
        
        <el-form-item label="行政处罚通知书：" v-show="!noticeCan">
          <div class="image-list">
            <div class="item" v-for="(item, index) in model.notices" :key="index" @click="handlePreview(item)">
              <img :src="item.url" alt="" />
            </div>
          </div>
        </el-form-item>

        <el-form-item label="" prop="notice" v-show="noticeCan">
          <div class="iUpload notice">
            <el-upload
              action="#" 
              list-type="picture-card" 
              multiple 
              :file-list="noticeList"
              :auto-upload="false" 
              :on-change="handleFileNotice"
              :on-preview="handlePreview"
              :on-remove="handleRemoveNotice"
            >
              <el-button size="small" type="primary">开具行政处罚通知书（上传）</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="案件状态" prop="punishState">
          <el-radio-group v-model="model.punishState">
            <el-radio label="1">未发送</el-radio>
            <el-radio label="2">完成送达</el-radio>
            <el-radio label="3">处罚销号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :maxlength="500"
            :rows="3"
            placeholder="请输入备注"
            v-model="model.remark">
          </el-input>
        </el-form-item>

        <el-form-item label="创建人员：">{{model.createName}}</el-form-item>
        <el-form-item label="创建时间：">{{model.createTime}}</el-form-item>
        <el-form-item></el-form-item>
        <div style="text-align: center; margin-bottom: 3px;">
          <el-button type="primary" @click="submitForm('iForm')">提交</el-button>
          <el-button @click="visible = false">取 消</el-button>
        </div>    
      </el-form>
    </el-dialog>
    <el-dialog class="image-preview" :visible.sync="visibleImage">
      <img width="100%" :src="imageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props:[],
    data () {
      return {
        visible: false,  

        visibleImage: false,
        imageUrl: '',

        noticeCan: false,
        noticeList: [],
        noticeListDel: [],

        model: {},
        rules: {},
      }
    },
    components: {},
    methods: {
      init(id){
        this.axios.post(process.env.API_HOST + `/punish/selectPunishDetail`, {id:id}).then(response => {
          const result = response.data
          if(result.code==200){
            this.noticeCan  = result.result.punishState == 1 ? true : false
            // result.result.punishState = parseInt(result.result.punishState) + 1//升1个状态
            result.result.punishState += ''
            this.imageList  = result.result.images
            this.noticeList = result.result.notices
            this.model      = result.result
            this.visible    = true
          }
        })
      },
      dialogClose(){
        this.visible        = false
        this.noticeList     = []
        this.noticeListDel  = []
      },
      // 预览
      handlePreview(file){
        this.imageUrl     = file.url;
        this.visibleImage = true;
      },
      // 删除
      handleRemove(key, file, fileList){
        this[key] = fileList
        if(!!file.id){
          this[key + 'Del'].push(file.id)
        }
      },
      handleRemoveNotice(file, fileList){
        this.handleRemove('noticeList', file, fileList)
      },

      // 选择文件
      handleFile(key, file, fileList){
        this[key] = fileList
      },
      handleFileNotice(file, fileList){
        this.handleFile('noticeList', file, fileList)
      },

      //提交回调
      doSubmit(){
        var data = new FormData(), post = {}
        data.append('id',             this.model.id)
        data.append('remark',         this.model.remark)
        data.append('punishState',    this.model.punishState)

        post = {
          id          : this.model.id,
          remark      : this.model.remark,
          punishState : this.model.punishState
        }

        if(this.noticeListDel.length > 0){
          for(var i in this.noticeListDel){
            data.append('deleteNotices', this.noticeListDel[i])
            if(i==0){
              post['deleteNotices'] = this.noticeListDel[i]
            }
          }
        }

        data.append('sign',           this.makeSign(post))

        // 补充图片
        if(this.noticeList.length > 0){
          for(var i in this.noticeList){
            if(!this.noticeList[i].id){
              data.append('noticeFile', this.noticeList[i].raw)
            }
          }
        }

        this.axios({
          method: 'post',
          url: process.env.API_HOST + `/punish/handlePunish`,
          timeout: 20000,
          headers:{'content-type':'multipart/form-data'},
          data: data,
        }).then(response=>{
            if(response.data.code==200){
              this.$message({
                type: 'success',
                message: '处理成功!'
              });
              this.$emit('searchRowsInfo')
              this.visible        = false
              this.noticeList     = []
              this.noticeListDel  = []
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.model.punishState == 2 && this.noticeList.length<=0){
              this.$message({type: 'error', message: '请上传行政处罚通知书'});
              return false; 
            }
            if(this.model.punishState == 3 && this.model.remark == ''){
              this.$message({type: 'error', message: '请填写备注'});
              return false; 
            }
            this.doSubmit()
          } else {
            return false;
          }
        });
      },

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .buttonAddWrap
    display inline-block
    margin-left 10px
</style>